<template>
    <div>
        <div id="stage-header">
            <div id="login">
                <a id="my-name"
                   :href="url"
                   class="link">{{user}}</a>&nbsp;&nbsp;&nbsp;
                <router-link to="/Cart"
                             class="link">购物车</router-link>
            </div>
            <div id="serach">______________________搜索</div>
        </div>
        <div id="stage-menu">
    
            <div id="stage-logo">Stage</div>
            <ul class="menuul">
                <li class="menuli">
                    <router-link to="/NewProduct"
                                 class="link">新品推荐</router-link>
                </li>
                <li class="menuli">
                    <router-link to="/Show/Men"
                                 class="link">男士</router-link>
                </li>
                <li class="menuli">
                    <router-link to="/Show/Women"
                                 class="link">女士</router-link>
                </li>
                <li class="menuli">
                    <router-link to="/Show/Children"
                                 class="link">儿童</router-link>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    data: function () {
        return {
            message: "header"
        }
    },
    created: function () {
        var _this = this;
        if ($.cookie('front-token') != null && $.cookie('user') == null) {
            $.ajax({
                type: "GET",
                url: "/api/User/GetUserInfo",
                headers: {
                    Authorization: "Bearer " + JSON.parse($.cookie('front-token')).access_token
                },
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    if (data != null) {
                        _this.$store.dispatch('setUserInfoactions',
                            data
                        );
                    }

                },
                error: function (msg) {
                    alert(msg);
                }
            });
        } else if ($.cookie('user') != null) {
            var user = JSON.parse($.cookie('user'));
            _this.$store.dispatch('setUserInfoactions',
                user
            );
        }


    },
    computed: {
        user() {
            if (this.$store.state.user.userName != '') {
                return this.$store.state.user.userName;
            } else {
                return "登录";
            }

        },
        url() {
            if (this.$store.state.user.userName != '') {
                return "http://localhost:60861/#/PersonalCenter"
            } else {
                return "http://localhost:60861/#/Login";
            }

        }
    }
}

</script>
<style>
.link {
    text-decoration: none;
    color: black;
}

img {
    max-width: 100%;
}

.menuul {
    margin-top: 65%;
}

#serach {
    font-size: 1.5em;
    margin-left: -50%;
}

.menuli {
    list-style: none;
    font-size: 1.5em;
}

#login {
    font-size: 0.8em;
    margin-bottom: 1%;
}

#stage-header {
    position: fixed;
    z-index: 99999999;
    top: 2%;
    left: 85%;
}

#stage-menu {
    z-index: 99999999;
    top: 20%;
    left: 55px;
    position: fixed;
}

#stage-logo {
    font-family: Cambria, Cochin, Georgia, Times, Times New Roman, serif;
    font-size: 4.5em;
}
</style>